<!-- eslint-disable vue/multi-word-component-names -->
<script setup lang="ts">
import { FullScreen } from '@element-plus/icons-vue'
import { ref } from 'vue'

const isFullscreen = ref(false)

const toggleFullscreen = () => {
  if (!document.fullscreenElement) {
    // 进入全屏
    document.documentElement.requestFullscreen().catch((err) => {
      console.error(`全屏错误: ${err.message}`)
    })
    isFullscreen.value = true
  } else {
    // 退出全屏
    if (document.exitFullscreen) {
      document.exitFullscreen()
      isFullscreen.value = false
    }
  }
}
</script>

<template>
  <div>
    <el-tooltip content="全屏">
      <el-icon :size="20" @click="toggleFullscreen">
        <FullScreen />
      </el-icon>
    </el-tooltip>
  </div>
</template>

<style lang="scss" scoped>
.home {
  color: red;
}
</style>
